<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>{{this.$route.query.title}}报修详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="宿舍楼">
            <el-input size="mini" class="ui-item-reset" v-model="repairItem.buildingNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="宿舍号">
            <el-input size="mini" class="ui-item-reset" v-model="repairItem.dorNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="报修号">
            <el-input size="mini" class="ui-item-reset" v-model="repairItem.repairId" disabled></el-input>
          </el-form-item>
          <el-form-item label="提交日期">
            <el-input size="mini" class="ui-item-reset" v-model="repairItem.submitDate" disabled></el-input>
          </el-form-item>
          <el-form-item label="报修种类">
            <el-select placeholder="请选择" size="mini" class="ui-item-reset" v-model="repairItem.repairKind"
                       :disabled="editFlag">
<!--              :value 动态绑定 repairItem.repairKind-->
              <el-option label="物资损坏" :value="1"></el-option>
              <el-option label="网络故障" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报修原因">
            <el-input size="mini" class="ui-item-reset" v-model="repairItem.repairReason"
                      :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="解决日期" prop="resolvedDate">
            <el-date-picker
              v-model="repairItem.resolvedDate"
              type="date"
              placeholder="选择日期"
              class="ui-item-reset"
              size="small"
              value-format="yyyy-MM-dd"
              @change="change"
              :disabled="editFlag">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'repairDetail',
    data() {
      return {
        repairId: this.$route.query.repairId,
        repairItem: {
          repairId: '',
          repairKind: '',
          repairReason: '',
          buildingNo: '',
          dorNo: '',
          submitDate: '',
          resolvedDate: ''
        },
        editFlag: true,

      }
    },
    created() {
      this.getRepair()
    },
    methods: {
      change(){
        console.log(this.repairItem.resolvedDate)
      },
      back() {
        console.log(this.$route)
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        // this.getItem()
      },
      isAdmin() {
        // get(`/pms_api/user/detail`,).then(res => {
        let userInfo = this.$getGlobal.getItem('userInfo')
        console.log(userInfo)
        if (userInfo.roleId !== '1' && userInfo.roleId !== "2") {
          this.$confirm('此操作仅限超级管理员使用,普通用户请前去个人中心修改密码', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      getRepair() {
        post(`/pms_api/repair/list`, {'repairId': this.repairId}).then(res => {
          // console.log('res', res)
          console.log(this.repairId)
          this.repairItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      saveItem() {
        post(`/pms_api/repair/edit`, this.repairItem).then(res => {
          this.cancelEdit()
          this.getRepair()
        }).catch(err => {
          console.log(err)
        })
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
